import React, {FC} from 'react';
import {View, Image, StyleSheet, TouchableOpacity} from 'react-native';
import icon_menu from '../../assets/icon_menu.png';
import icon_share from '../../assets/icon_share.png';
import icon_shop_car from '../../assets/icon_shop_car.png';
type PropsType = {
  onSettingClick: () => void;
};
const Title: FC<PropsType> = (props: PropsType) => {
  const {onSettingClick} = props;
  return (
    <View style={styles.titleLayout}>
      <TouchableOpacity style={styles.menuBtn} onPress={onSettingClick}>
        <Image style={styles.menuIcon} source={icon_menu} />
      </TouchableOpacity>

      <View style={styles.blank} />
      <Image style={styles.shopIcon} source={icon_shop_car} />
      <Image style={styles.shareIcon} source={icon_share} />
    </View>
  );
};

const styles = StyleSheet.create({
  titleLayout: {
    width: '100%',
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
  },
  menuBtn: {
    height: '100%',
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  menuIcon: {
    width: 24,
    height: 24,
    resizeMode: 'contain',
  },
  blank: {
    flex: 1,
  },
  shopIcon: {
    width: 24,
    height: 24,
    resizeMode: 'contain',
    tintColor: 'white',
  },
  shareIcon: {
    width: 24,
    height: 24,
    marginLeft: 10,
    resizeMode: 'contain',
    tintColor: 'white',
    marginEnd: 16,
  },
});
export default Title;
